<template>
  <div class="">
    <div class="bg-white p-4">
      <div class="text-lg font-bold mb-2 title" style="background-color: #f2f2f2; height: 45px; line-height: 45px">
        <span style="margin-left: 20px;font-size: 15px;">请选择接电用途</span></div
      >

      <div class="" style="margin: 0 20px">
        <div>
          <div class="text-lg font-bold mb-2 title">居民生活用电</div>
          <van-button @click="onSubmit('居民照明')">居民照明</van-button>
          <van-button>居民生活用电</van-button>
        </div>
        <div>
          <div class="text-lg font-bold mb-2 title">教学用电</div>
          <van-button>学前教育</van-button>
          <van-button>初等教育</van-button>
          <van-button>中等教育</van-button>
          <van-button>高等教育</van-button>
          <van-button>特殊公益性教育</van-button>
        </div>
        <div>
          <div class="text-lg font-bold mb-2 title">普通工业用电</div>
          <van-button>农副产品工业</van-button>
          <van-button>肉屠宰场/加工</van-button>
          <van-button>工厂污水处理</van-button>
          <van-button>仓储</van-button>
          <van-button>充电桩</van-button>
        </div>
        <div>
          <div class="text-lg font-bold mb-2 title">商业用电</div>
          <van-button>饭店</van-button>
          <van-button>商场</van-button>
          <van-button>网吧</van-button>
          <van-button>非公益性的培训机构</van-button>
          <van-button>驾校</van-button>
          <van-button>加油站</van-button>
          <van-button>物流</van-button>
          <van-button>旅馆</van-button>
          <van-button>农家乐</van-button>
        </div>
        <div>
          <div class="text-lg font-bold mb-2 title">非工业用电</div>
          <van-button>基建施工</van-button>
        </div>
        <div>
          <div class="text-lg font-bold mb-2 title">非居民照明</div>
          <van-button>办公</van-button>
          <van-button>路灯</van-button>
          <van-button>广播</van-button>
        </div>
        <div>
          <div class="text-lg font-bold mb-2 title">农业生产用电</div>
          <van-button>排灌</van-button>
          <van-button>农作物种植</van-button>
          <van-button>畜牧业养殖</van-button>
          <van-button>渔业养殖</van-button>
          <van-button>防风治沙</van-button>
        </div>
        <div>
          <div class="text-lg font-bold mb-2 title">其他用电</div>
          <van-button>其他用电</van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup name="">
  import { ref } from 'vue';
  onActivated(()=>{
    const html = document.documentElement;
    html.style.fontSize = "";
    document.body.scrollTop = 0;
  // firefox
  document.documentElement.scrollTop = 0;
  // safari
  window.pageYOffset = 0;
  });
  const uRouter = useRouter();
  const onSubmit = (s) => {
    uRouter.push({
      // push方法
      path: '/test', //这里是跳转页面的name
      query: { type: s },
    });
  };
</script>

<style scoped>
  .container {
    max-width: 375px;
  }
  .van-progress {
    width: 100%;
  }
  .van-button {
    width: 185px;
    height: 50px;
    font-size: 18px;
    margin-right: 30px;
    margin-bottom: 14px;
  }
  .title {
    font-size: 22px;
    margin: 10px 0;
    font-weight: 500;
  }
</style>
